<!--
 * @FileDescription 应用界面 - 基本设置
 * @Author 杨宇翔
 * @Date 20220530 16:39:28
 * @LastEditors 杨宇翔
 * @LastEditTime 20220530 16:39:28
-->
<template>
    <div class="container">
        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 基本设置 - 目标识别" hidden
            v-model="UsageComponent.Default.RecognitionMode.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 基本设置 - 目标识别">
            <span></span>
            <span>目标识别</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 基本设置 - 显示标签" hidden
            v-model="ObjectInformationComponent.Default.Visibility.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 基本设置 - 显示标签">
            <span></span>
            <span>显示标签</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 基本设置 - 显示碰撞检测区域" hidden v-model="collisionRegionVisibility">
        <label class="basic-settings-list-item" for="应用界面设置 - 基本设置 - 显示碰撞检测区域">
            <span></span>
            <span>显示碰撞检测区域</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 基本设置 - 显示雷达探测区域" hidden v-model="detectionAreaVisibility">
        <label class="basic-settings-list-item" for="应用界面设置 - 基本设置 - 显示雷达探测区域">
            <span></span>
            <span>显示雷达探测区域</span>
        </label>
    </div>
</template>

<script setup lang="ts">
import { computed, Ref, ref, watch } from 'vue';
import { CollisionRegionVisibilityComponent, DetectionAreaVisibilityComponent, ObjectInformationComponent, UsageComponent } from './LidarComponent';

const state: Ref<boolean> = ref(true);
const heightValue = computed(() => state.value ? '19.4rem' : '3.4rem');

/**
 * 碰撞区域可见性
 */
const collisionRegionVisibility = ref(false);
/**
 * 检测范围可见性
 */
const detectionAreaVisibility = ref(false);

watch(collisionRegionVisibility, value => CollisionRegionVisibilityComponent.Default.UpdateAsync(value));
watch(detectionAreaVisibility, value => DetectionAreaVisibilityComponent.Default.UpdateAsync(value));

</script>

<style scoped>
.container {
    padding: 0 2.5rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

label>span:first-of-type {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;

    background-image: url('/static/Lidar/ic_checkbox_normal.png');
}

input:checked+label>span:first-of-type {
    background-image: url('/static/Lidar/ic_checkbox_select.png');
}

input:checked+label>span:last-of-type {
    color: white;
}

label>span:last-of-type {
    color: #81859C;
    font-size: 1.6rem;
}
</style>./LidarComponent